<template>
	<view>
		<view class="serach-box">
			<uni-search-bar
				:radius="20"
				placeholder="请输入车牌进行搜索"
				@confirm="search"
				@input="hanldeInput"
			></uni-search-bar>
		</view>
		<!-- 手风琴效果 -->
		<uni-collapse :accordion="true" v-if="!showSearch">
			<uni-collapse-item
				title="车队一"
				:showAnimation="true"
				thumb="/static/icon/carList.png"
				thumb-size="sm"
			>
				<view>
					<uni-list style="padding: 30rpx;">
						<uni-list-item
							v-for="item in list"
							:title="item"
							thumb="/static/icon/cartow.png"
							thumb-size="sm"
							data-car="456"
							clickable
							@click="() => carClick(item)"
						/>
					</uni-list>
				</view>
			</uni-collapse-item>
			<uni-collapse-item
				title="车队二"
				:showAnimation="true"
				thumb="/static/icon/carList.png"
				thumb-size="sm"
			>
				<view>
					<uni-list style="padding: 30rpx;">
						<uni-list-item v-for="item in list" :title="item" />
					</uni-list>
				</view>
			</uni-collapse-item>
			<uni-collapse-item
				title="车队三"
				:showAnimation="true"
				thumb="/static/icon/carList.png"
				thumb-size="sm"
			>
				<view>
					<uni-list style="padding: 30rpx;">
						<uni-list-item v-for="item in list" :title="item" />
					</uni-list>
				</view>
			</uni-collapse-item>
		</uni-collapse>
		<view v-else>
			<uni-list>
				<uni-list-item
					v-for="item in searchList"
					:title="item"
					thumb="/static/icon/cartow.png"
					thumb-size="sm"
				/>
			</uni-list>
		</view>
		<uni-drawer ref="drawer" mode="right">
			<view style="padding:30rpx;">
				<view class="uni-title">
					<uni-list>
						<uni-list-item
							title="图片"
							note=""
							thumb="/static/icon/tupian.png"
							thumb-size="sm"
							@click="imageCar"
						></uni-list-item>
						<uni-list-item
							title="拍照"
							note=""
							thumb="/static/icon/paizhao.png"
							thumb-size="sm"
							@click="photo"
						></uni-list-item>
						<uni-list-item
							title="取证"
							note=""
							thumb="/static/icon/quzheng.png"
							thumb-size="sm"
							:clickable="true"
							@click="obtainEvidence"
						></uni-list-item>
						<uni-list-item
							title="监控"
							note=""
							thumb="/static/icon/jiankong.png"
							thumb-size="sm"
						></uni-list-item>
						<uni-list-item
							title="位置"
							note=""
							thumb="/static/icon/weizhi.png"
							thumb-size="sm"
						></uni-list-item>
						<uni-list-item
							title="轨迹"
							note=""
							thumb="/static/icon/guiji.png"
							thumb-size="sm"
						></uni-list-item>
						<uni-list-item
							title="详情"
							note=""
							thumb="/static/icon/xiangqing.png"
							thumb-size="sm"
							@click="detailCar"
						></uni-list-item>
					</uni-list>
				</view>
			</view>
		</uni-drawer>
		<view class="">
			<uni-popup type="center" ref="photo">
				
				<view class="photo-type" style="width: 500rpx;">
					<uni-list>
						<uni-list-item title="前置" note=""></uni-list-item>
						<uni-list-item title="后置" note=""></uni-list-item>
					</uni-list>
				</view>

			</uni-popup>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchList: [],
			showSearch: false,
			showDrawer: false,
			list: ['粤L.5400学', '粤L.5966学', '粤L.6237学']
		};
	},
	methods: {
		search(value) {
			//console.log(value);
		},
		//处理搜索框
		hanldeInput(obj) {
			//console.log(obj.value);
			if (obj.value == '') {
				this.searchList = [];
				this.showSearch = false;
				return;
			}
			this.showSearch = true;
			this.searchList = this.list.filter(e => {
				return e.indexOf(obj.value) != -1;
			});
		},
		// 点击车辆,出现弹窗
		carClick(e) {
			//console.log(e);
			this.$refs.drawer.open();
		},
		// 取证操作
		obtainEvidence(){
			uni.navigateTo({
				url:"../obtainEvidence/obtainEvidence"
			})

		},
		//拍照
		photo(){
			this.$refs.drawer.close();
			this.$refs.photo.open()
		},
		//图片
		imageCar(){
			uni.navigateTo({
				url:"../imageCar/imageCar"
			})
		},
		// 详情
		detailCar(){
			uni.navigateTo({
				url:"../detailCar/detailCar"
			})
		}
	},
	created() {},
	onHide(){
		this.$refs.drawer.close();
	}
};
</script>

<style></style>
